import styled from 'styled-components'

const inputStyle = `
  border-radius: 6px;
  border:1px solid #999;
  padding: 10px;
  text-indent: 40px;
`
function setInputIcon(font:string, color:string) {
  return `
    &::after {
      content: "${font}";
      position: absolute;
      top: 50%;
      left: 15px;
      transform: translateY(-50%);
      font-family: "iconfont";
      font-size: 21px;
      color: ${color};
    }
  `
}

export default styled.div`
  .main {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    height: 650px;
    background: url("/images/banner01.jpg");
    background-position: 50% 50%;
    background-size: cover;
    margin-bottom: 30px;
    &::before {
      content: "";
      position: absolute;
      inset: 0;
      /* 利用定位层级,把元素定位到普通元素下面去 */
      z-index: 1; 
      background-color: rgba(0,0,0,.2);
    }
    .flag-searchArea {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 10;
      .flag {
        font-size: 40px;
        color: #fff;
        margin-bottom: 50px;
        text-align: center;
      }
      .searchArea {
        display: flex;
        flex-wrap: wrap;
        width: 800px;
        height: 180px;
        background-color: #fff;
        border-radius: 20px;
        padding: 20px;
        gap: 2%;
        .selectMeal-container {
          position: relative;
          width: 35%;
          height: 50px;
          // 设置icon
          ${setInputIcon("\ue62f", "#77c256")}
          .selectMeal {
            width: 100%;
            height: 100%;
            ${inputStyle}
          }
        }
        .typeMeal-container {
          position: relative;
          width: 35%;
          height: 50px;
          // 设置icon
          ${setInputIcon("\uea70", "#ed8824")}
          .typeMeal {
            width: 100%;
            height: 100%;
            ${inputStyle}
          }
        }
        .slimmingMeal {
          width: 25%;
          height: 50px;
          line-height: 50px;
          text-align: center;
          .slimmingBtn {
            width: 20px;
            height: 20px;
            vertical-align: middle;
            margin-right: 10px;
          }
          .slimmingText {
            vertical-align: middle;
          }
        }
        .remainFood-container {
          position: relative;
          width: 72%;
          height: 50px;
          // 设置icon
          ${setInputIcon("\ue684", "#06b3c1")}
          .remainFood {
            width: 100%;
            height: 100%;
            ${inputStyle}
          }
        }
        .search {
          width: 25%;
          height: 50px;
          border: 1px solid #8bd128;
          background-image: linear-gradient(45deg, #a1e541, #68ac08);
          border-radius: 5px;
          color: #fff;
          font-size: 18px;
        }
      }
    }
  }
`